import { StatusBar } from 'expo-status-bar';
import {
  StyleSheet, Text, View, Image, ImageBackground,
  TextInput, ScrollView, Button, TouchableOpacity
} from 'react-native';
import react, { useState } from 'react';
// 自定义组件，直接实现红色Text标签
const RedTxt = (props) => {
  return <Text style={styles.txtColor}>{props.content}</Text>
}

const RedTxt2 = (props) => {
  return <Text style={styles.txtColor}>{props.children}</Text>
}

const ImageBack = (props) => {
  return <ImageBackground
    style={{ width: 300, height: 300 }}
    source={require('./assets/1000608.jpg')}
  >
    {props.children}
  </ImageBackground>
}

export default function App() {
  const [value, setValue] = useState('')
  return (
    // View本身就是一个弹性盒子，因此不用再display:flex了
    // 除了Text不是弹性盒子，别的标签都是弹性盒子，可以不用display
    <ScrollView style={[styles.container]}>

      <Button
        onPress={() => { }}
        title="按钮"
        color="#841584"
      />
      <TouchableOpacity
        style={styles.btn}
        onPress={() => { console.log(1234) }}>
        <Text style={{ fontSize: 20, color: '#fff' }}>常用按钮</Text>
      </TouchableOpacity>
      <TextInput
        style={styles.input}
        placeholder='请输入内容'
        value={value}
        onChangeText={(text) => setValue(text)}
      />



      {/* Image必须添加宽和高，不然不能在浏览器中显示出来 */}
      {/* cover会覆盖全部，保持图片宽高比，保证宽高都大于等于容器尺寸 */}
      {/* contain可能不会覆盖全部，保持图片宽高比，保证宽高都小于等于容器尺寸 */}
      <Image
        style={styles.img}
        resizeMode='contain'
        source={require('./assets/11.jpg')}
      />
      <Image
        style={styles.img}
        resizeMode='cover'
        source={require('./assets/11.jpg')}
      />

      <Image style={{ width: 150, height: 150 }}
        resizeMode='cover'
        source={{ uri: 'https://www.baidu.com/img/pc_9c5c85e6b953f1d172e1ed6821618b91.png' }}
      />
      <ImageBackground style={{ width: 300, height: 300 }}
        source={require('./assets/11.jpg')}
      >

        <Text style={{ color: '#fff', fontSize: 32 }}>Hello World!!!</Text>
      </ImageBackground>
      {/* 背景图片的封装 */}
      <ImageBack>
        <Text style={{ color: '#fff', fontSize: 32, textAlign: 'center' }}>add背景图片测试</Text>
      </ImageBack>
      <Text>Text01</Text>
      <RedTxt content='自定义组件'></RedTxt>
      <RedTxt2 >自定义组件2</RedTxt2>

      <Text >
        Text文本只能继承父元素Text的样式，不能继承再外层View的样式了
        View是纵向的主轴，和Text是两回事，所以不会继承
        Text要是再放在一个Text里面就不会再继承View的弹性盒了
        <Text style={styles.txtColor}>
          Text02
          <Text>Text03</Text>
        </Text>
      </Text>

      <Text style={styles.txtColor}>Hello World呀呀呀呀呀呀</Text>
      <StatusBar style="auto" />
    </ScrollView>
  );
}
// StyleSheet.create({})一个文件可以有多个create，命名也可以变化，
// 不同样式应用到同一个元素上时后者会覆盖前者,多个样式书写的时候这么写来{[styles.container,styles.bg]}
const styles = StyleSheet.create({
  container: {
    // flex: 1,
    // alignItems: 'center',
    // justifyContent: 'center',//和C3中相反，默认主轴方向是纵向的，C3中是横向的
  },
  bg: {
    backgroundColor: '#fdc',
  },
  txtColor: {
    color: '#f00',
    // 默认宽高都可以不带单位，自己会默认单位bp
    fontSize: 32
  },
  img: {
    width: 300,
    height: 300,
  },
  input: {
    borderColor: '#000',
    borderWidth: 1,
    margin: 20,
    height: 50,
    width: 300
  },
  btn: {
    height: 50,
    margin: 20,
    backgroundColor: '#f00',
    alignItems: 'center',
    justifyContent: 'center'
  }
});
